<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 李东阳
  Date: 2021/12/7
  Time: 16:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>影视分析平台</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main_css.css">
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>Vue.config.productionTip= false </script>


<body>



<%--vue包裹区--%>
<div id="app1">


    <%--导航栏--%>
    <nav class="main_daohanglan navbar navbar-expand-sm fixed-top navbar-light">


        <!-- Brand/logo -->
        <a class="" href="#">
            <img class="main_touxiang rounded" :src="user.uImg" alt="logo" style="width:60px;">
        </a>
        <h4 class="active">&nbsp;&nbsp;{{user.uName}}</h4>
        <!-- Links -->
        <ul class="navbar-nav ml-auto">

            <li class="nav-item ">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item" @click="toCart">
                <a class="nav-link text-dark">
                    <div>购物车
                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-basket2" viewBox="0 0 16 16">
                    <path d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0v-2z"/>
                    <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6H2.163z"/>
                </svg>
                    </div>
                </a>
            </li>
        </ul>

    </nav>
<%--        导航栏结束--%>



<%--下部区--%>
    <div class="container-fluid main">
        <div class="row">
            <%--            左侧副导航栏--%>
            <div class="col-md-2 sidebar">
                <div class="container">
                    <div class="row" style="padding-top: 10%">
                        <div class="col-lg-12 text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" style="color: #4FC3F7;margin-bottom: 20px"
                                 width="56" height="56" fill="currentColor" class="bi bi-clipboard-data"
                                 viewBox="0 0 16 16">
                                <path d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z"/>
                                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                            </svg>
                        </div>
                    </div>
                    <hr>
                    <div class="row" style="margin-top: 50px;margin-left: 18%">

                        <ul class="list-group list-group-flush" style="position: relative">
                            <li class="list-group-item  chuizhi_li" style="border-bottom: 3px solid #4FC3F7;">我的主页
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                                         class="bi bi-person-circle" viewBox="0 0 16 16">
                                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                        <path fill-rule="evenodd"
                                              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li">我的好友 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                                         class="bi bi-emoji-sunglasses" viewBox="0 0 16 16">
                                        <path d="M4.968 9.75a.5.5 0 1 0-.866.5A4.498 4.498 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.498 3.498 0 0 1 8 11.5a3.498 3.498 0 0 1-3.032-1.75zM7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A2.99 2.99 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.22 4.22 0 0 0 8 5c-.35 0-.69.04-1 .116z"/>
                                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li" @click="toMovie">商品列表 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
                                        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li" @click="toMovieAn">商品分析 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item">
                            </li>

                        </ul>


                    </div>

                </div>
            </div>
<%--                左侧副导航栏结束--%>




            <%--    右侧内容区--%>
            <div class="col-md-10 content float-right">


                <div class="container">

                    <%--                    背景图区--%>
                    <div class="row mt-2">
                        <div class="card col-lg-12">
                            <img class="card-img-top" src="img/morenbackground.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
<%--                        背景图区结束--%>



<%--                        功能区--%>
                    <div class="row mt-2">
                        <%--自我介绍+百度百科查询区--%>
                        <div class="card col-lg-7">
                            <div style="background-color: rgb(249,250,253);border-bottom: 1px solid rgb(249,250,253);margin-bottom: 10px">
                                <h5 class="card-title">自我介绍</h5>
                            </div>


                            <div class="overflow-auto" style="height: 300px">
                                <p class="card-text">Dedicated, passionate, and accomplished Full Stack Developer with
                                    9+ years of progressive experience working as an Independent Contractor for Google
                                    and developing and growing my educational social network that helps others learn
                                    programming, web design, game development, networking.

                                    I've acquired a wide depth of knowledge and expertise in using my technical skills
                                    in programming, computer science, software development, and mobile app development
                                    to developing solutions to help organizations increase productivity, and accelerate
                                    business performance.

                                    It's great that we live in an age where we can share so much with technology but I'm
                                    but I'm ready for the next phase of my career, with a healthy balance between the
                                    virtual world and a workplace where I help others face-to-face.

                                    There's always something new to learn, especially in IT-related fields. People like
                                    working with me because I can explain technology to everyone, from staff to
                                    executives who need me to tie together the details and the big picture. I can also
                                    implement the technologies that successful projects need.
                                </p>
                            </div>
                            <%--                            查询--%>

                            <div class="card mt-2">

                                <div class="card-header">
                                    <div style="width: 250px;margin: 0 auto">

                                        <h5>百度一下，你就知道</h5>
                                        <form class="form-inline">
                                            <input type="text" v-model="search">
                                            <button class="btn btn-primary btn-sm" type="button" @click="toSearch">查询</button>
                                        </form>

                                    </div>


                                </div>


                                <div class="searchContent card-body overflow-auto" style="height: 135px" >


                                </div>
                            </div>




                        </div>
                            <%--自我介绍+百度百科查询区结束--%>




                        <%--                        我的喜欢区--%>
                        <div class="card col-lg-5 overflow-auto" style="height: 600px">
                            <div style="background-color: rgb(249,250,253);border-bottom: 1px solid rgb(249,250,253);margin-bottom: 10px;">
                                <h5 class="card-title">我的喜欢</h5>
                            </div>



                            <div v-for="(book,i) in likes" class="card likeCard mt-2" style="width: 18rem;margin:0 auto;padding-bottom: 20px " @click="toBookInfo(book)">
                                <img class="card-img-top" :src="imgSrcb(book.bid)" alt="Card image cap">
                                <h5 class="card-title">{{book.bname}}</h5>
                                <div class="card-body overflow-auto" style="height: 150px;border: 1px solid #f2f5fa;border-radius: 3px">

                                    <p class="card-text">{{book.binfo}}</p>

                                </div>
                                <div style="margin-left: 50px;margin-top: 10px"><button class="btn btn-primary">购买</button></div>
                            </div>




                        </div>
<%--                        我的喜欢区结束--%>








                    </div>
<%--                        功能区结束--%>















                    <%--                我的好友--%>
                    <div class="row mt-2">

                        <div class="card col-lg-12">
                            <div style="background-color: rgb(249,250,253);border-bottom: 1px solid rgb(249,250,253);margin-bottom: 10px">
                                <h5 class="card-title">我的好友</h5>
                            </div>

                            <div class="card-deck mb-2">

                                <div class="card" style="width: 12rem">
                                    <img class="card-img-top rounded-circle" style="height: 100px;width: 100px;margin: 0 auto" src="img/u003.jpg"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div>
                                </div>
                                <div class="card" style="width: 12rem">
                                    <img class="card-img-top rounded-circle" style="height: 100px;width: 100px;margin: 0 auto" src="img/u003.jpg"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div>
                                </div>
                                <div class="card" style="width: 12rem">
                                    <img class="card-img-top rounded-circle" style="height: 100px;width: 100px;margin: 0 auto" src="img/u003.jpg"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div>
                                </div>
                                <div class="card" style="width: 12rem">
                                    <img class="card-img-top rounded-circle" style="height: 100px;width: 100px;margin: 0 auto" src="img/u003.jpg"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div>
                                </div>

                            </div> <div class="card-deck">

                                <div class="card" style="width: 12rem">
                                    <img class="card-img-top rounded-circle" style="height: 100px;width: 100px;margin: 0 auto" src="img/u003.jpg"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div>
                                </div>
                                <div class="card" style="width: 12rem">
                                    <img class="card-img-top rounded-circle" style="height: 100px;width: 100px;margin: 0 auto" src="img/u003.jpg"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div>
                                </div>
                                <div class="card" style="width: 12rem">
                                    <img class="card-img-top rounded-circle" style="height: 100px;width: 100px;margin: 0 auto" src="img/u003.jpg"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div>
                                </div>
                                <div class="card" style="width: 12rem">
                                    <img class="card-img-top rounded-circle" style="height: 100px;width: 100px;margin: 0 auto" src="img/u003.jpg"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
<%--                    我的好友区结束--%>


                </div>
            </div>
<%--            右侧内容区结束--%>




        </div>


    </div>
<%--    下部区结束--%>


        </div>
<%--vue包裹区结束--%>



    <script>
        var app = new Vue({
            el: "#app1",
            data() {
                return {
                    user: JSON.parse(localStorage.getItem("user")),
                    likes:${sessionScope.myLikes}
                }
            },
            methods:{
                toMovie(){

                    axios.post('${pageContext.request.contextPath}/movie/findAllMovies').then(
                        function (response) {

                             localStorage.setItem("movies",response.data)


                            window.location.href="shop.jsp"
                        }
                    ).catch(function (error) {
                        console.log(error);
                    })

                },
                toBookInfo(book) {
                    localStorage.setItem("book", JSON.stringify(book))
                    window.location.href = "bookinfo.jsp"
                },
                toMovieAn(){
                    window.location.href="shopAnalysis.jsp"
                },
                toSearch(){
                    axios.get("https://api.muxiaoguo.cn/api/Baike?",{params:{type:"Baidu",word:this.search}}).then(function (response) {
                        $(".searchContent").html(response.data.data.content)

                    })
                },
                imgSrcb(bid) {
                    return "img/" + bid + ".jpg"
                },
                toCart(){
                    axios.post("${pageContext.request.contextPath}/cart/findAllShops").then(function (response) {
                            if (response.data=="1"){
                                window.location.href="basket.jsp"
                            }else {
                                alert("chabudao")
                            }
                    })
                }
            }

        })




    </script>
</body>
</html>

